<template>
	<div class="login-container">
		<el-row>
			<el-col :lg="14" :md="11" :sm="24" :xl="14" :xs="24">
				<div style="color: transparent">占位符</div>
			</el-col>
			<el-col :lg="9" :md="12" :sm="24" :xl="9" :xs="24">
				<div class="login-form">
					<div class="title">{{ themeConfig.globalTitle }}</div>
					<!--密码登录-->
					<el-form ref="formRef" label-position="left" :model="form" :rules="rules">
						<el-form-item prop="username">
							<el-input v-model.trim="form.username" placeholder="请输入用户名" tabindex="3" type="text" @keyup.enter="passwordRef.focus()">
								<template #prefix>
									<el-icon color="#0052CC" size="20"><ele-User /></el-icon>
								</template>
							</el-input>
						</el-form-item>
						<el-form-item prop="password">
							<el-input :key="passwordType" ref="passwordRef" v-model.trim="form.password" placeholder="请输入密码" tabindex="4" :type="passwordType" @keyup.enter="handleLogin">
								<template #prefix>
									<el-icon color="#0052CC" size="20"><ele-Unlock /></el-icon>
								</template>
								<template v-if="passwordType === 'password'" #suffix>
									<el-icon class="show-password" @click="handlePassword"><ele-Hide /></el-icon>
								</template>
								<template v-else #suffix>
									<el-icon class="show-password" @click="handlePassword"><ele-View /></el-icon>
								</template>
							</el-input>
						</el-form-item>
						<Verify ref="refVerifyPwd" :captcha-type="'clickWord'" :img-size="{ width: '330px', height: '155px' }" :mode="'pop'" @success="capturePwdSuccess" />
						<el-button class="login-btn" :loading="loading" type="primary" @click="handleLogin">登&nbsp;&nbsp;录</el-button>
					</el-form>
				</div>
			</el-col>
		</el-row>
	</div>
</template>
<script setup name="login">
import global from '@/utils/global'
import { useUserInfo } from '@/stores/userInfo'
import { useThemeConfig } from '@/stores/themeConfig'
import { NextLoading } from '@/utils/loading'
import Verify from '@/components/verifition/Verify.vue'
import { MD5 } from 'crypto-js'
/*
 *@Description: 状态初始化
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-08-24 09:18:07
 */
const storesThemeConfig = useThemeConfig()
const { themeConfig } = storeToRefs(storesThemeConfig)
const userInfo = useUserInfo()
const router = useRouter()
const passwordRef = ref(null)

const refVerifyPwd = ref(null)
const state = reactive({
	formRef: null,
	paramsRef: null,
	form: {
		username: '',
		password: '',
	},
	captrueParams: {},
	rules: {
		username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
		password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
	},
	loading: false,
	passwordType: 'password',
	redirect: undefined,
})

const { loading, form, rules, passwordType, formRef } = toRefs(state)

/*
 *@Description: 方法模块
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-08-24 09:18:21
 */
const handlePassword = () => {
	state.passwordType === 'password' ? (state.passwordType = '') : (state.passwordType = 'password')
	nextTick(() => {
		passwordRef.value.focus()
	})
}
// 密码登录主逻辑
const handleLogin = async () => {
	state.formRef.validate(async valid => {
		if (valid) {
			refVerifyPwd.value.show()
		}
	})
}
const capturePwdSuccess = params => {
	state.captrueParams = readonly(params)
	refVerifyPwd.value.closeBox()
	handlePwdSubmit()
}
const handlePwdSubmit = () => {
	state.loading = true
	setTimeout(() => {
		state.loading = false
	}, 2000)
	global
		.$fetchPostData(`/meta-auth/web/v1/auth/login`, {
			...state.form,
			password: MD5(state.form.password).toString(),
			...state.captrueParams,
		})
		.then(data => {
			state.loading = false
			if (data.code == 200) {
				userInfo.setToken(data.data.token)
				loginSuccess()
			} else {
				global.$baseMessage('登录失败！', 'error')
			}
		})
}
// 登录成功
const loginSuccess = async () => {
	router.replace('/')
}
/*
 *@Description: 生命周期
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-08-24 09:18:37
 */
onMounted(() => {
	NextLoading.done()
})
</script>
<style lang="scss" scoped>
.login-container {
	height: 100vh;
	width: 100%;
	background: url('@/assets/images/login-bg.jpg') no-repeat center;
	background-size: cover;
}
.tip-txt {
	text-align: right;
	margin-top: -20px;
	margin-bottom: 21px;
	cursor: pointer;
	color: #999;
}
.login-form {
	position: relative;
	width: 470px;
	height: auto;
	padding: 45px 59px 65px 59px;
	margin: calc(48vh - 227.5px) 5.5vw 5vw;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 2px 3px 10px 0 rgba(0, 51, 79, 0.3);
	background-color: #fff;
	box-sizing: border-box;
	.title {
		width: 100%;
		font-size: 34px;
		font-weight: 400;
		color: #0052cc;
		text-align: center;
		padding-bottom: 40px;
	}
	.peak-tabs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 5px 40px 0 40px;
		.tab-item {
			font-size: 16px;
			color: #999;
			cursor: pointer;
			font-weight: 400;
			height: 80px;
			line-height: 80px;
			text-align: center;
			&.active {
				position: relative;
				font-weight: 700;
				color: #0052cc;
			}
		}
	}
	.sms-code {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		.phone-code {
			height: 49px;
			width: 30%;
			font-size: 16px !important;
			background-color: #0052cc;
			color: #fff;
			border: 1px solid #0052cc;
		}
	}
	.login-btn {
		width: 100%;
		height: 50px;
		font-size: 18px !important;
		color: #fff;
		border: 0;
		background: linear-gradient(0deg, #0052cc, #1890ff);
		border-radius: 5px;
		margin-top: 10px;
		&:hover {
			opacity: 0.9;
		}
		&.mobile-btn {
			margin-top: 20px;
		}
	}

	.tips {
		margin-bottom: 10px;
		font-size: 14px;
		color: #fff;
		span {
			&:first-of-type {
				margin-right: 16px;
			}
		}
	}
	.icon-style {
		color: rgba(204, 204, 204, 0.6);
	}
	.show-password {
		font-size: 16px;
		color: rgba(204, 204, 204, 1);
		cursor: pointer;
		user-select: none;
	}
	:deep() {
		.verifybox {
			left: 73% !important;
		}
		.el-form-item {
			padding-right: 0;
			margin-bottom: 40px;
			color: #454545;
			background: transparent;
			border-radius: 4px;
			border: 1px solid hsla(0, 0%, 80%, 0.6);
			&__content {
				min-height: 32px;
				line-height: 32px;
			}

			&__error {
				position: absolute;
				top: 100%;
				left: 0px;
				font-size: 14px;
				line-height: 20px;
				color: #f04141;
			}
		}
		// .user-icon {
		// 	width: 50px;
		// 	height: 16px;
		// 	border-right: 1px solid rgba(143, 154, 182, 0.37);
		// 	background: url('@/assets/images/user-icon.png') no-repeat center;
		// 	background-size: 15px 16px;
		// 	margin-left: -10px;
		// }
		// .pwd-icon {
		// 	width: 50px;
		// 	height: 16px;
		// 	border-right: 1px solid rgba(143, 154, 182, 0.37);
		// 	background: url('@/assets/images/pwd-icon.png') no-repeat center;
		// 	background-size: 15px 16px;
		// 	margin-left: -10px;
		// }
		// .lock-icon {
		// 	width: 50px;
		// 	height: 16px;
		// 	border-right: 1px solid rgba(143, 154, 182, 0.37);
		// 	background: url('@/assets/images/lock-icon.png') no-repeat center;
		// 	background-size: 15px 16px;
		// 	margin-left: -10px;
		// }

		.el-input {
			box-sizing: border-box;
			.el-input__wrapper {
				background: #fff;
				box-shadow: 0 0 0 1px #fff inset;
			}

			input {
				height: 47px;
				font-size: 16px;
				line-height: 58px;
				background: #fff;
				border: 0;
			}
		}
		.el-form-item.is-error {
			.el-input__wrapper {
				box-shadow: 0 0 0 1px #ff4d4f inset;
			}
		}
	}
}
</style>
